<template>
	<a-table :columns="columns" :data-source="tableData" :pagination="false"
		:scroll="{ x: '80%', y: TABLE_SCROLL_HEIGHT }" rowKey="id" :customRow="customRow" :row-selection="rowSelection" >
		<template #index="{ index }">{{ index + 1 }}</template>
		<template #sex="{ text }">{{ $OPTIONS.SEX[text] }}</template>
		<template #operation="{ record }">
			<div class="operation">
				<a @click.stop="Onoperation('look', record)" class="look">查看</a>
				<a @click.stop="Onoperation('dev', record)" class="divide">分配</a>
				<a @click.stop="Onoperation('report', record)" class="edit">报告</a>
				<!-- <a @click.stop="Onoperation('test', record)" class="test">测试</a> -->
			</div>
		</template>
	</a-table>
</template>

<script lang="ts" setup>
	import { ref, computed } from "vue";
	import useGetTableScrollHeight from "@/utils/useGetTableScrollHeight";
	
	defineProps({
		tableData: {
			type: Array,
			default:()=>[]
		},
	});
	const EMITS = defineEmits(["operation"]);
	const TABLE_SCROLL_HEIGHT = useGetTableScrollHeight();
	// const tableData = ref([]);
	
	const columns = [
		{ title: "序号", dataIndex: "index", ellipsis: true,slots: { customRender: "index" } },
		{ title: "患者名", dataIndex: "userName", ellipsis: true, },
		{ title: "性别", dataIndex: "sex", ellipsis: true,slots: { customRender: "sex" } },
		{ title: "年龄", dataIndex: "age", ellipsis: true, },
		{ title: "科室", dataIndex: "deptName", ellipsis: true, },
		{ title: "关联医生", dataIndex: "doctorName", ellipsis: true, },
		{ title: "创建时间", dataIndex: "createTime", ellipsis: true, },
		{ title: "操作", dataIndex: "operation", width: 300,align: "center", slots: { customRender: "operation" } },
	];
	const selectedRowKeysval = ref<any>([]);
	const selectedRowsval = ref<any>([]);
	
	function selectRow(record: any){	// 点击行选中
		// const selectedRowKeys = selectedRowKeysval.value;
		// let selectedRows = selectedRowsval.value;
		// if (selectedRowKeys.indexOf(record.id) >= 0) {
		// 	selectedRowKeys.splice(selectedRowKeys.indexOf(record.id), 1);
		// 	selectedRows = selectedRows.filter(
		// 		(item: any) => item.id != record.id
		// 	);
		// 	EMITS("manyName", selectedRows);
		// } else {
		// 	selectedRowKeys.push(record.id);
		// 	selectedRows.push(record);
		// }
		// selectedRowKeysval.value = selectedRowKeys;
		// selectedRowsval.value = selectedRows;
		// EMITS("operation", 99, selectedRowsval.value);
		// EMITS("manyName", selectedRowsval.value);
	};
	
	const customRow = (record: any,) => {
		return {
			onClick: () => {
				selectRow(record);
			},
		};
	};
	
	const rowSelection = computed(() => {
		return {
			selectedRowKeys: selectedRowKeysval.value,
			selectedRows: selectedRowsval.value,
			onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
				selectedRowKeysval.value = selectedRowKeys;
				selectedRowsval.value = selectedRows;
			},
			preserveSelectedRowKeys: true
		};
	});
	
	const Onoperation = (index, row) => {
		EMITS("operation", index, row);
	};
	
	defineExpose({ selectedRowKeysval })
</script>

<style>
</style>